<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-text class="mx-1" type="info">共有</el-text>
                <el-text class="mx-1" type="danger">{{ this.list.length }}</el-text>
                <el-text class="mx-1" type="info">项 , 还剩</el-text>
                <el-text class="mx-1" type="danger">{{ count }}</el-text>
                <el-text class="mx-1" type="info">项</el-text>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col :span="24">
                <el-button type="primary" @click="show('all')">全部</el-button>
                <el-button type="success" @click="show('done')">已完成</el-button>
                <el-button type="warning" @click="show('undo')">待完成</el-button>
                <el-button type="danger" @click="show('clear')">清空</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    props:{list:Array},
    computed:{
        count(){
            let cnt = 0
            this.list.map(v=>{
                if(v.state==false){
                    cnt++
                }
            })
            return cnt
        }
    },
    methods: {
        show(val){
            this.$emit('show',val)
        }
    },
}
</script>